<template>
  <div class="video-container">
    <!-- 缩略图/封面图（点击触发弹窗） -->
    <div
      class="video-poster"
      :style="{ backgroundImage: `url(${poster})` }"
      @click="openFullscreenModal"
    >
      <!-- 小窗口自动播放的视频（圆角、静音、循环） -->
      <video
        ref="miniPlayerRef"
        class="mini-video"
        autoplay
        muted
        loop
        playsinline
        :src="videoSrc"
        @click.stop="openFullscreenModal"
      ></video>
      <!-- 播放提示图标 -->
      <div class="play-icon">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="white">
          <path d="M8 5v14l11-7z" />
        </svg>
      </div>
    </div>

    <!-- 全屏播放弹窗 -->
    <teleport to="body">
      <div
        class="fullscreen-modal"
        v-if="isModalOpen"
        @click="closeFullscreenModal"
      >
        <div class="modal-content" @click.stop>
          <!-- 关闭按钮 -->
          <button class="close-btn" @click="closeFullscreenModal">×</button>
          <!-- 完整功能播放器 -->
          <video
            ref="fullPlayerRef"
            class="video-js vjs-default-skin"
            controls
            autoplay
            :src="videoSrc"
          ></video>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import type { VideoJsPlayer } from 'video.js';

// 视频源和封面图（可通过props传入）
const videoSrc = ref('https://vjs.zencdn.net/v/oceans.mp4');
const poster = ref('https://vjs.zencdn.net/v/oceans.png');

// 状态管理
const isModalOpen = ref(false);
const miniPlayerRef = ref<HTMLVideoElement | null>(null);
const fullPlayerRef = ref<HTMLVideoElement | null>(null);
let fullPlayer: VideoJsPlayer | null = null;

// 打开全屏弹窗
const openFullscreenModal = () => {
  isModalOpen.value = true;
  // 等待弹窗渲染后初始化播放器
  nextTick(() => {
    if (fullPlayerRef.value) {
      // 销毁旧实例（如果存在）
      if (fullPlayer) fullPlayer.dispose();
      // 初始化带声音的完整播放器
      fullPlayer = videojs(fullPlayerRef.value, {
        autoplay: true,
        controls: true,
        muted: false, // 弹窗播放时开启声音
        loop: false,  // 弹窗播放不循环（可按需修改）
        fluid: true   // 自适应容器大小
      });
    }
  });
};

// 关闭全屏弹窗
const closeFullscreenModal = () => {
  if (fullPlayer) {
    fullPlayer.pause();
    fullPlayer.dispose(); // 销毁播放器释放资源
    fullPlayer = null;
  }
  isModalOpen.value = false;
};

// 组件卸载时清理
onBeforeUnmount(() => {
  if (fullPlayer) fullPlayer.dispose();
});
</script>

<style scoped>
.video-container {


    width: 100%; /* 容器宽度（可固定，如 600px） */
  max-width: 600px; /* 限制最大宽度，避免过大 */
  border-radius: 12px; /* 你的圆角值 */
  overflow: hidden; /* 关键：裁剪超出容器的视频 */
  position: relative; /* 配合视频绝对定位 */
  /* 固定容器比例（推荐 16:9，避免拉伸） */
  aspect-ratio: 16 / 9; /* 现代浏览器支持，直接设置宽高比 */
  /* 兼容旧浏览器：用 padding-top 模拟 16:9 比例 */
  /* padding-top: 56.25%; 16:9 的比例计算：9/16=0.5625 → 56.25% */

}

/* 小窗口容器（圆角） */
.video-poster {
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  border-radius: 12px; /* 与外层div圆角匹配 */
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

/* 小窗口视频（圆角、自动播放） */
.mini-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px; /* 视频圆角 */
}

/* 播放提示图标 */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.3s;
}
.video-poster:hover .play-icon {
  opacity: 1;
}

/* 全屏弹窗背景 */
.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

/* 弹窗内容 */
.modal-content {
  width: 100%;
  max-width: 1280px;
  position: relative;
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  background: transparent;
  border: none;
  font-size: 32px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 全屏播放器样式 */
:deep(.video-js) {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 弹窗播放器轻微圆角 */
}
</style>